<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/show/show_banner.png" style="width：100%" alt />
      <div class="bread">
        <p v-if="$route.query.orderId==1">
          <router-link to="/">首页</router-link>》展览 》基本陈列
        </p>
        <p v-if="$route.query.orderId==2">
          <router-link to="/">首页</router-link>》展览 》临展预告
        </p>
        <p v-if="$route.query.orderId==3">
          <router-link to="/">首页</router-link>》展览 》网上展厅
        </p>
      </div>
    </div>
    <div class="bg_person">
      <div class="content gwgk">
        <div class="left">
          <ul class="nav">
            <li @click="tiaoz1(index+1)" v-for="(item,index) of nav" :key="index">
              <!-- <router-link :to="item.href"> -->
              <span :class="{blue:$route.query.orderId==index+1}">{{item.name}}</span>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="lineTime" v-if="show">
            <ul v-show="$route.name!=='basez' &&$route.name!=='year'">
              <li v-for="(item,index) of time2" :key="index" @click="choosetime(index,item.date)">
                <i :class="index==ixiabiao?'border':'gray'"></i>
                <p>{{item.date}}</p>
              </li>
            </ul>
          </div>
          <router-view></router-view>
        </div>
        <div></div>
      </div>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      time2: [
        { date: "2020" },
        { date: "2019" },
        { date: "2018" },
        { date: "2017" },
        { date: "2016" },
        { date: "2015" },

        { date: "2014" },
        { date: "2013" }
      ],
      zhiyuanzhezhijia: "",
      zhidujianshe2: "",
      nav: [
        {
          name: "基本陈列",
          href: "/linzhan/basez"
        },
        {
          name: "临时展览",
          href: "/linzhan/linzhan2"
        },
        {
          name: "网上展厅",
          href: "/linzhan/year"
        }
      ],
      show: false,
      ixiabiao: 0
    };
  },
  components: {
    foot2: foot2
  },
  methods: {
    choosetime(index,date) {
      this.ixiabiao = index;

    //  console.log(index,date)
        this.$router
          .push({
            path: "/linzhan/linzhan2/:id",
            query: { order: index, bool: true, lookurl:date }
          })
          .catch(err => {
            err;
          });
      
       
    },
    tiaoz1(i) {
      if (i == 1) {
        this.$router
          .push({
            path: "/linzhan/basez/:id",
            query: { orderId: i, bool: true }
          })
          .catch(err => {
            err;
          });
      } else if (i == 2) {
        this.show = true;
        this.ixiabiao=0
        this.$router
          .push({
            path: "/linzhan/linzhan2/:id",
            query: { orderId: i, bool: true }
          })
          .catch(err => {
            err;
          });
      } else if (i == 3) {
        this.$router
          .push({
            path: "/linzhan/year/:id",
            query: { orderId: i, bool: true }
          })
          .catch(err => {
            err;
          });
      }
    }
  }
  // created() {
  //   this.zhiyuanzhezhijia = "/zhidujianshe/zhiyuanzhezhijia";
  //   this.zhidujianshe2 = "/zhidujianshe/zhidujianshe2";
  // },

  // beforeRouteUpdate(to, from, next) {
  //   this.zhiyuanzhezhijia = "/zhidujianshe/zhiyuanzhezhijia";
  //   this.zhidujianshe2 = "/zhidujianshe/zhidujianshe2";

  //   next();
  // },
};
</script>
<style scoped>
li {
  list-style: none;
}
p,
ul,
li {
  padding: 0px;
  margin: 0px;
}
.lineTime {
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 60px;
  font-size: 18px;
}
.gwgk.content .lineTime ul {
  border-top: 3px solid #bfbfbf;
  padding-top: 28px;
  display: flex;
  width: 1000px;
  box-sizing: border-box;
  margin: auto;
}
.lineTime li {
  margin-bottom: 70px;
  position: relative;
  margin-right: 73px;
  cursor: pointer;
}
.border {
  border: 2px solid #4e69a1;
  background: white;
}
.gray {
  background: #bfbfbf;
}
.lineTime i {
  width: 18px;
  height: 18px;
  display: inline-block;

  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: -40px;
}

.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}
.bg_person {
  width: 100%;
  height: 100%;
  background: url("../../assets/image/show_bg2.png");
  background-repeat: no-repeat;
}
.gwgk.content {
  display: flex;

  color: #4e4b4b;
  width: 1200px;
  font-size: 24px;
  margin: auto;
  padding-top: 44px;
  box-sizing: border-box;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: #4e69a1;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
.gwgk .left {
  width: 195px;
  background: url("../../assets/image/left_nav.png") no-repeat;
}
.gwgk .left ul {
  padding: 30px;
  box-sizing: border-box;
}
.gwgk .left .nav li {
  font-size: 18px;
  color: #6e6e6e;
  width: 140px;
  cursor: pointer;
  box-sizing: border-box;
}
.gwgk .left .nav li:first-child {
  padding-top: 0px;
  padding-bottom: 16px;
}

.gwgk .left .nav li span {
  display: inline-block;
  margin-left: 30px;
}
.gwgk .left .nav li:not(:last-child) {
  border-bottom: 2px solid #9e9e9e;
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.gwgk .right {
  width: 940px;

  padding: 0 16px 0;
  box-sizing: border-box;
}

.gwgk .blue {
  color: #003567;
}
</style>